<template>
  <card ref="Card">
    <div class="logistics-number mb-10">
      <clipboard :text="response.number">单号：{{response.number}}</clipboard>
    </div>
    <el-image
        v-if="picture"
        style="width: 175px;height: 125px;padding-left: 32px"
        :src="$baseApi + picture"
        :preview-src-list="[$baseApi + picture]">
      <div slot="error">
        <img src="../../../assets/notFound.png" alt=""/>
      </div>
    </el-image>
    <van-steps direction="vertical" :active="0">
      <van-step v-for="item in formData" :key="item.context + item.time">
        <h3 class="mb-10">{{item.context}}</h3>
        <p>{{item.time | formatDateTime}}</p>
      </van-step>
    </van-steps>
    <div slot="footer" v-if="id" v-permission="['admin']">
      <el-button type="warning" @click="recall">撤回</el-button>
    </div>
  </card>
</template>

<script>
  import {getOperationApi, recallApi} from "@/api/operation";
  import {isEmpty} from "@/utils/common";
  import Clipboard from "@/components/Clipboard"

  export default {
    name: "Box",
    components: {Clipboard},
    props: {
      response: {
        required: true
      }
    },
    data() {
      return {
        id: null,
        formData: [],
        picture: ''
      }
    },
    mounted() {
      this.getDataNoRequest(this.response)
    },
    methods: {
      getOperation() { // 有请求
        this.id = null
        this.formData = []
        this.picture = ''
        this.$refs.Card.start()
        getOperationApi({number: this.response.number}).then(res => {
          this.$refs.Card.stop()

          let firstFormData;
          let secondFormData;

          let response = res.resultParam.result
          let begin = response.begin;
          let end = response.end;

          if (typeof (begin) === 'string' && begin.length > 0) { // 字符串
            firstFormData = this.transformString(begin)
          } else if (begin && begin.length > 0) { // 数组
            firstFormData = this.transformArray(res.resultParam.result, begin)
          } else { // null
            firstFormData = []
          }

          if (typeof (end) === 'string' && end.length > 0) { // 字符串
            secondFormData = this.transformString(end)
          } else if (end && end.length > 0) { // 数组
            secondFormData = this.transformArray(res.resultParam.result, end)
          } else { // null
            secondFormData = []
          }

          this.formData = [...firstFormData, ...secondFormData]

          if (response.isIncomingOrders === true) {
            let context = ''
            let laoContext = ''
            if (response.username === '8560004') {
              context = `您的包裹已由老挝韻達国际快递广州仓库签收入库，准备发往老挝`
              laoContext = `ສີນຄ້າຂອງທ່ານໄດ້ຖືກຂົນສົ່ງລາວຢຸນດາເຊັນຮັບແລ້ວ，ກຳລັງຈັດສົ່ງມາລາວ`
            } else if (response.username === '8560005') {
              // context = `您的包裹已入库老挝韻達国际快递昆明仓库准备发往磨憨口岸仓库`
              // laoContext = `ສີນຄ້າຂອງຮອດສາງLao Yunda International Express Kunming ແລ້ວກຳລັງສົ່ງໄປທີ່ສາງທ່າເຮືອ Mohan`
              context = `您的包裹已入库老挝韻逹国际快递昆明仓库发往老挝万象分拨中心`
              laoContext = `ເຄື່ອງຂອງເຈົ້າໄດ້ຖືກເກັບຮັກສາໄວ້ຢູ່ໃນສາງສາກົນຢຸນດາດ່ວນສາກົນຄຸນໝີງຂອງແລະສົ່ງໄປທີ່ສູນກະຈາຍສິນຄ້າຢູ່ວຽງຈັນ`
            } else {
              context = `您的包裹已入库,准备发往老挝`
              laoContext = `ຊຸດຂອງທ່ານຖືກເກັບໄວ້ແລ້ວຸນດາເຊັນຮັບແລ້ວ，ກຳລັງຈັດສົ່ງມາລາວ`
            }
            this.formData.push({
              state: '入库',
              laosState: 'ສາງ',
              context: context,
              laoContext: laoContext,
              time: response.createTime
            })
          }
        }).catch(() => {
          this.$refs.Card.stop()
        })
      },
      getDataNoRequest(response) { // 无请求
        this.id = null
        this.formData = []
        this.picture = ''

        let firstFormData;
        let secondFormData;

        let begin = response.begin;
        let end = response.end;

        if (typeof (begin) === 'string' && begin.length > 0) { // 字符串
          firstFormData = this.transformString(begin)
        } else if (begin && begin.length > 0) { // 数组
          firstFormData = this.transformArray(response, begin)
        } else { // null
          firstFormData = []
        }

        if (typeof (end) === 'string' && end.length > 0) { // 字符串
          secondFormData = this.transformString(end)
        } else if (end && end.length > 0) { // 数组
          secondFormData = this.transformArray(response, end)
        } else { // null
          secondFormData = []
        }

        this.formData = [...firstFormData, ...secondFormData]

        if (response.isIncomingOrders === true) {
          let context = ''
          let laoContext = ''
          if (response.username === '8560004') {
            context = `您的包裹已由老挝韻達国际快递广州仓库签收入库，准备发往老挝`
            laoContext = `ສີນຄ້າຂອງທ່ານໄດ້ຖືກຂົນສົ່ງລາວຢຸນດາເຊັນຮັບແລ້ວ，ກຳລັງຈັດສົ່ງມາລາວ`
          } else if (response.username === '8560005') {
            // context = `您的包裹已入库老挝韻達国际快递昆明仓库准备发往磨憨口岸仓库`
            // laoContext = `ສີນຄ້າຂອງຮອດສາງLao Yunda International Express Kunming ແລ້ວກຳລັງສົ່ງໄປທີ່ສາງທ່າເຮືອ Mohan`
            context = `您的包裹已入库老挝韻逹国际快递昆明仓库发往老挝万象分拨中心`
            laoContext = `ເຄື່ອງຂອງເຈົ້າໄດ້ຖືກເກັບຮັກສາໄວ້ຢູ່ໃນສາງສາກົນຢຸນດາດ່ວນສາກົນຄຸນໝີງຂອງແລະສົ່ງໄປທີ່ສູນກະຈາຍສິນຄ້າຢູ່ວຽງຈັນ`
          } else {
            context = `您的包裹已入库,准备发往老挝`
            laoContext = `ຊຸດຂອງທ່ານຖືກເກັບໄວ້ແລ້ວຸນດາເຊັນຮັບແລ້ວ，ກຳລັງຈັດສົ່ງມາລາວ`
          }
          this.formData.push({
            state: '入库',
            laosState: 'ສາງ',
            context: context,
            laoContext: laoContext,
            time: response.createTime
          })
        }
      },
      transformArray(response, array) { // 己方
        let last = array[array.length - 1]
        if (last.state === 5) {
          this.picture = last.picture
        }

        let formData = []
        let receiverName = isEmpty(response.receiverName) ? '' : `, 收件人：${response.receiverName}`
        let laosReceiverName = isEmpty(response.receiverName) ? '' : `, ຜູ້ຮັບ：${response.receiverName}`
        let receiverPhone = isEmpty(response.receiverPhone) ? '' : `(${response.receiverPhone})`
        array.forEach((item) => {
          if (!this.id) this.id = item.expressOrderId
          let currentName = isEmpty(item.currentName) ? '' : `【${item.currentName}】`
          let sendToName = isEmpty(item.sendToName) ? '' : `【${item.sendToName}】`
          let laosCurrentName = isEmpty(item.laosCurrentName) ? '' : `【${item.laosCurrentName}】`
          let laosSendToName = isEmpty(item.laosSendToName) ? '' : `【${item.laosSendToName}】`
          switch (item.state) {
            case 0:
              formData.push({
                state: '揽收',
                laosState: 'ເກັບ ກ',
                context: `快件已揽收${currentName}${receiverName}${receiverPhone}`,
                laoContext: `ການຂົນສົ່ງໄດ້ຖືກເກັບ${laosCurrentName}(${laosReceiverName}，${receiverPhone})`,
                time: item.createTime
              })
              break;
            case 1:
              formData.push({
                state: '发出',
                laosState: 'ບັນຫາ',
                context: `快件在${currentName}已发出，准备发往：${sendToName}`,
                laoContext: `Courier ຢູ່${laosCurrentName}ໄດ້ເລີ່ມຕົ້ນແລ້ວ，ພ້ອມສົ່ງ：${laosSendToName}`,
                time: item.createTime
              })
              break;
            case 2:
              formData.push({
                state: '到达',
                laosState: 'ການມາຮອດ',
                context: `快件已到达${currentName}`,
                laoContext: `ການຂົນສົ່ງໄດ້ມາຮອດແລ້ວ${laosCurrentName}`,
                time: item.createTime
              })
              break;
            case 3:
              formData.push({
                state: '待取件',
                laosState: 'ທີ່ຍັງຄ້າງ',
                context: `快件待取件中.`,
                laoContext: `ການສະແດງອອກທີ່ຍັງຄ້າງຢູ່`,
                time: item.createTime
              })
              break;
            case 4:
              formData.push({
                state: '问题件',
                laosState: 'ຊິ້ນບັນຫາ',
                context: `您的快件状态异常`,
                laoContext: `ສະພາບການຂົນສົ່ງຂອງທ່ານແມ່ນຜິດປົກກະຕິ`,
                time: item.createTime
              })
              break;
            case 5:
              formData.push({
                state: '签收',
                laosState: 'ລົງທະບຽນ',
                context: `您的快件已送达，感谢您使用韻達快遞，期待再次为您服务。`,
                laoContext: `ສຳ ນວນຂອງທ່ານໄດ້ຖືກສົ່ງໄປແລ້ວ, ຂໍຂອບໃຈທ່ານທີ່ໃຊ້ Yunda Express, ແລະຫວັງວ່າຈະໄດ້ຮັບໃຊ້ທ່ານອີກຄັ້ງ.`,
                time: item.createTime
              })
              break;
          }
        })
        formData = formData.reverse()
        return formData
      },
      // eslint-disable-next-line no-unused-vars
      transformString(string) { // 第三方
        // return JSON.parse(string)['data']
        return []
      },
      recall() {
        this.$msgBox('确认撤回？')
          .then(() => {
            return recallApi({id: this.id})
          })
          .then(result => {
            if (result.status === 200) this.getOperation()
          })
      }
    }
  }
</script>

<style scoped>
  .van-hairline {
    color: #323233;
  }

  .logistics-number {
    text-align: center;
  }
</style>
